<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../../layuiAdmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="../../src/all.css" media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
  <style>
    .margin-top {
      margin-top: 20px;
    }

    .h1 {
      font-size: 20px;
      /* padding-left: 50px; */
    }

    .layui-form-label {
      white-space: nowrap;
    }

    .height {
      height: 20px;
    }

    .btnbox {
      padding: 10px;
      text-align: center;
    }

    .upload-drag {
      border: 1px dashed #ddd;
      align-items: center;
      justify-content: center;
      display: flex;
      width: 128px;
      height: 128px;
      border-radius: 10px;
    }

    .upload-drag:hover {
      border: 1px dashed var(--color-primary, #4165d7);
    }

    .flex {
      align-items: center;
      justify-content: center;
      display: flex;
    }
  </style>
</head>


<body style="background-color: #fff;">

  <div class="layui-fluid">
    <div class="layui-card margin-top">
      <!-- layui-card-body -->
      <div class="height"></div>
      <div class="layui-fluid">
        <form class="layui-form" action="" lay-filter='check'>
          <!-- 行 -->
          <div class="layui-form-item ">
            <label class="layui-form-label">头像</label>
            <div class=" layui-input-block">
              <div class="upload-drag" id="test10">
                <div class="flex layui-flex" id='uphide'>
                  <i class="layui-icon" style="color:#ddd;font-size:20px;margin-right:10px">&#xe64a;</i>
                  <p>选择头像</p>
                </div>
                <div class="layui-hide" id="uploadDemoView">
                  <img src="" alt="上传成功后渲染" style="width: 125px">
                </div>
              </div>
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label"><i class="red"> * </i>姓名</label>
            <div class="layui-input-block">
              <input type="text" style="width:488px" name="name" autocomplete="off" placeholder="请填写真实姓名"
                class="layui-input">
            </div>
          </div>

          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label"><i class="red"> * </i>昵称</label>
              <div class="layui-input-block">
                <input type="text" name="nikename" autocomplete="off" placeholder="请填写昵称" class="layui-input">
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label"><i class="red"> * </i>用户名</label>
              <div class="layui-input-block">
                <input type="text" name="username" autocomplete="off" placeholder="请登录用户名" class="layui-input">
              </div>
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label"><i class="red"> * </i>部门</label>
            <div class="layui-input-block">
              <input type="text" name="department" style="width:488px;" id="layer-open" autocomplete="off"
                placeholder="点击选择" class="layui-input">
            </div>
          </div>
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">手机号码</label>
              <div class="layui-input-block">
                <input type="text" name="phone" autocomplete="off" placeholder="请输入标题" class="layui-input">
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">邮箱</label>
              <div class="layui-input-block">
                <input type="text" name="email" autocomplete="off" placeholder="请输入标题" class="layui-input">
              </div>
            </div>

          </div>

          <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
              <input type="radio" name="gender" value="男" title="男" checked="">
              <input type="radio" name="gender" value="女" title="女">
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
              <input type="checkbox" checked="" name="status" lay-skin="switch" lay-filter="switchTest"
                lay-text="ON|OFF">
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label"><i class="red"> * </i>岗位</label>
            <div class="layui-input-block" style="width:488px;">
              <input type="text" name="job" lay-verify="required" autocomplete="off" placeholder="请输入标题"
                class="layui-input">
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">角色</label>
            <div class="layui-input-block">
              <input type="checkbox" class='role' name="role[2]" value="1" lay-skin="primary" title="平煤神马集团管理员">
              <input type="checkbox" class='role' name="role[1]" value="2" lay-skin="primary" title="总调度室角色">
              <!-- <input type="checkbox" name="role[3]" value="3" lay-skin="primary" title="股份通风处角色">
              <input type="checkbox" name="role[4]" value="4" lay-skin="primary" title="股份生产处角色">
              <input type="checkbox" name="role[5]" value="5" lay-skin="primary" title="股份开拓处角色">
              <input type="checkbox" name="role[9]" value="6" lay-skin="primary" title="集团煤矿机电处">
              <input type="checkbox" name="role[0]" value="7" lay-skin="primary" title="集团地测处角色">
              <input type="checkbox" name="role[9]" value="8" lay-skin="primary" title="总办室角色"> -->
            </div>
          </div>
          <div class="layui-form-item" style="width:90%;margin:auto;">
            <blockquote class="layui-elem-quote">新增用户默认密码：123456</blockquote>
          </div>
          <div class="layui-form-item btnbox">
            <div class="layui-inline">
              <button type="button" lay-submit lay-filter="formsave" id='bindAction'
                class="layui-btn layui-btn-sm  layui-btn-normal">
                <i class="layui-icon">&#xe608;</i> 保存
              </button>
            </div>
            <div class="layui-inline">
              <button type="button" class="layui-btn layui-btn-sm  layui-top-info" onclick="parent.layer.closeAll()">
                <i class="layui-icon">&#x1006;</i> 取消
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>

  <script src="../../layuiAdmin/layui/layui.all.js" charset="utf-8"></script>
  <!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->

  <script>
    layui.use(['form', 'layer', 'layedit', 'laydate', 'table', 'upload'], function () {
      let $ = layui.jquery
        , upload = layui.upload
        , form = layui.form

      // 编辑
      function edit() {
        let index = layer.load()
        parent.axios({
          url: "",
          success(res) {
            layer.close(index)
          }
        })
      }
      // 保存按钮
      form.on('submit(formsave)', function (data) {

        //获取checkbox[name='like']的值
        var arr = new Array();
        $("input:checkbox[name='role']:checked").each(function (i) {
          arr[i] = $(this).val();
        });
        data.field.role = arr.join(",");//将数组合并成字符串
        $('input:checkbox:checked')
        var array = $('input:checkbox:checked.role');
        var str = []
        for (let i = 0; i < array.length; i++) {
          const obj = array[i];
          str.push(obj.value)

        }
        console.log(str.join(','))
        // parent.axios({
        //   url: '/xt/add',
        //   method: 'POST',
        //   data: data.field,
        //   success(res) {
        //     console.log(res)
        //   }
        // })
        return false
      })
      //普通图片上传
      //拖拽上传
      upload.render({
        elem: '#test10'
        // , bindAction: '#bindAction'
        , auto: false
        , url: '/a' //改成您自己的上传接口
        , choose: function (obj) {
          //将每次选择的文件追加到文件队列
          var files = obj.pushFile();
          //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
          obj.preview(function (index, file, result) {
            // console.log(index); //得到文件索引
            console.log(file); //得到文件对象
            // console.log(result); //得到文件base64编码，比如图片

            layui.$('#uphide').addClass('layui-hide')
            layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', result);
            //obj.resetFile(index, file, '123.jpg'); //重命名文件名，layui 2.3.0 开始新增
            // 
            //这里还可以做一些 append 文件列表 DOM 的操作

            //obj.upload(index, file); //对上传失败的单个文件重新上传，一般在某个事件中使用
            //delete files[index]; //删除列表中对应的文件，一般在某个事件中使用
          });
        }
        , done: function (res) {
          layer.msg('上传成功');
          layui.$('#uphide').addClass('layui-hide')
          layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.files.file);
          console.log(res)
        }
      });

      $('#layer-open').focus(function (e) {
        layer.open({
          type: 2,
          zIndex: layer.zIndex, //重点1
          title: '部门名称',
          shadeClose: true,
          // shade: true,
          // btn: ['确认', '取消'],
          maxmin: false, //开启最大化最小化按钮
          area: ['50%', '50%'],
          content: '/page/隐患/zRenBumen.html',
          id: 'LAY_layuipro',
          success: function (index, layero) {
            //获取子页面 iframe对象
            var iframeWindow = window['layui-layer-iframe' + layero]
              , btnId = 'LAY-btn-add'
              , btn = index.find('iframe').contents().find('#' + btnId);
            console.log()
            btn.on('click', function (e) {
              var value = iframeWindow.check();
              $('#layer-open').val(value.title)
              layer.close(layero)
            })

          },
          end: function () {
            // window.location.reload();
          }
        })
      });
    });
  </script>

</body>

</html>